<template>
  <div class="comment-list-container">
    <div class="comment-list-header">
      <h3 style="color: #333333;">评论列表</h3>
      <button class="close-btn" @click="$emit('close')">×</button>
    </div>
    
    <div class="comment-list-body">
      <div v-if="isLoading" class="loading-state">
        加载中...
      </div>
      
      <div v-else-if="error" class="error-state">
        {{ error }}
        <button @click="fetchComments">重试</button>
      </div>
      
      <template v-else>
        <div v-if="comments.length === 0" class="no-comments">
          暂无评论
        </div>
        
        <div v-else class="comments-scrollable">
          <div 
            v-for="comment in comments" 
            :key="comment.id" 
            class="comment-item"
          >
            <div class="comment-meta">
              <span class="comment-author">{{ comment.creatorId || '匿名用户' }}</span>
              <span class="comment-time">{{ formatTime(comment.timestamp) }}</span>
            </div>
            <div class="selected-text-preview">
              "{{ truncateText(comment.selectedText, 50) }}"
            </div>
            <div class="comment-content">
              {{ comment.content }}
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getCommentListAPI } from '@/api/comment.ts'
import type { GetCommentListResponse } from '@/types/index.ts'

const props = defineProps({
  documentId: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['close', 'highlight'])

// 状态管理
const isLoading = ref(false)
const error = ref<string | null>(null)
const docId = ref<string | null>(null)

// 状态管理
const comments = ref<Comment[]>([]) // 简化为Comment数组

// 获取评论列表
const fetchComments = async () => {
  try {
    isLoading.value = true
    error.value = null
    const response = await getCommentListAPI(props.documentId)
    comments.value = response.map(comment => ({
      ...comment,
      timestamp: new Date(comment.timestamp) // 转换为Date对象
    }))
  } catch (err) {
    error.value = err instanceof Error ? err.message : '获取评论失败'
    console.error('获取评论列表失败:', err)
  } finally {
    isLoading.value = false
  }
}
// 高亮关联文本
// const highlightText = (comment: GetCommentListResponse['comment_list'][0]) => {
//   emit('highlight', {
//     text: comment.selectedText,
//     commentId: comment.id
//   })
// }

// 格式化时间
const formatTime = (time: Date) => {
  return time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) + 
    ' · ' + time.toLocaleDateString()
}

// 截断长文本
const truncateText = (text: string, maxLength: number) => {
  return text.length > maxLength 
    ? text.substring(0, maxLength) + '...' 
    : text
}

// 初始化加载
onMounted(fetchComments)
defineExpose({
  fetchComments
})
</script>

<style scoped>
.comment-list-container {
  position: fixed;
  right: 0;
  top: 0;
  width: 320px;
  height: 100vh;
  background: white;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  z-index: 1000;
}

.comment-list-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-list-header h3 {
  margin: 0;
  font-size: 18px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
}

.comment-list-body {
  flex: 1;
  padding: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.loading-state, .error-state, .no-comments {
  padding: 20px;
  text-align: center;
  color: #666;
}

.error-state button {
  margin-top: 10px;
  padding: 4px 8px;
}

.comments-scrollable {
  overflow-y: auto;
  flex: 1;
}

.comment-item {
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 6px;
  border: 1px solid #eee;
  cursor: pointer;
  transition: all 0.2s;
}

.comment-item:hover {
  background-color: #f9f9f9;
  border-color: #ddd;
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #888;
  margin-bottom: 8px;
}

.comment-author {
  font-weight: bold;
}

.selected-text-preview {
  color: #666;
  font-style: italic;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comment-content {
  line-height: 1.4;
  color: #666;
}
</style>